<template>
  <div>
    <HelloWorld
      :listTab="listTab.list"
      @hanClick="hanClick"
      :numIndex="numIndex"
    ></HelloWorld>
  </div>
  <keep-alive :max="3">
    <component :is="isComponent" :list="list"> </component>
  </keep-alive>
</template>
<script lang="ts" setup>
import { listGt } from '../utli/index';
import { reactive, ref, shallowRef, defineAsyncComponent } from 'vue';
import HelloWorld from '../components/HelloWorld.vue';

// 异步组件注册
const Gantt = defineAsyncComponent(
  () => import('../components/pageIndex/Gantt.vue')
);
const Timing = defineAsyncComponent(
  () => import('../components/pageIndex/Timing.vue')
);
const Flowchart = defineAsyncComponent(
  () => import('../components/pageIndex/Flowchart.vue')
);
const Time = defineAsyncComponent(
  () => import('../components/pageIndex/Time.vue')
);
const Loading = defineAsyncComponent(
  () => import('../components/pageIndex/Loading.vue')
);
const Tree = defineAsyncComponent(
  () => import('../components/pageIndex/Tree.vue')
);

// Ts接口定义类
interface list {
  name: String;
  id: String | Number;
}
// isObject组件类型定义
interface isObjectFace {
  0: HTMLElement;
  1: HTMLElement;
  2: HTMLElement;
}

// 数据初始化
let listTab = reactive({
  list: [
    {
      name: '甘特图',
      id: 0
    },
    {
      name: '时序图',
      id: 1
    },
    {
      name: '流程图',
      id: 2
    },
    {
      name: '时间刻度',
      id: 3
    },
    {
      name: '区域格子Loading',
      id: 4
    },
    {
      name: '穿梭框',
      id: 5
    }
  ] as list[]
});

let list = listGt;
let numIndex = ref(5 as number);
let isObject = {
  0: Gantt,
  1: Timing,
  2: Flowchart,
  3: Time,
  4: Loading,
  5: Tree
} as any;
// 没采用ref会导致没必要的性能消耗
let isComponent: any = shallowRef(isObject[numIndex.value]);
//数据操作部分

function hanClick(d: any, index: number) {
  numIndex.value = index;
  isComponent.value = isObject[d.id];
}
</script>
<style scoped></style>
